<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>vue</title>监听器</title>
	<script type="text/javascript" src="vue.js"></script>
</head>

<body>
	<div id="app">
      <div>
          str的原始值 : {{str}}
      </div>
      <div>
        1.转换为大写后反转str：{{str.toUpperCase().split("").reverse().join("")}}
      </div>
	</div>


</body>
<script>
	//vue是一个类 使用的是Vue的实例
	const vm = new Vue({
		el: "#app",
		data() {
			return {
                str: "hello world",
                stu:{
                    name:"admin",
                    age:18
                }
            }
        },
        watch:{//监听器
          //方法名必须是被监听的data中的属性名
          str(newValue/*修改后*/,oldValue/*修改前*/){
              console.log("监听到str修改前为："+oldValue+"--修改后:"+newValue);
          },
          "stu.name"(newValue){
            console.log("监听到stu的name修改,修改后的值为："+newValue)
          },
          immediate:false,/*是否理解监听*/
          deep:true,/*深度监听*/
        }
	})

</script>

</html>